<template>
  <div class="xterm-container">
    <div>
      <el-form
        :model="hostForm"
        :rules="rules"
        ref="hostForm"
        label-width="70px"
        size="small"
        :inline="true"
      >
        <el-form-item label="主机IP" prop="hostIp">
          <el-input
            v-model="hostForm.hostIp"
            placeholder="请输入主机IP"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="端口号" prop="hostPort">
          <el-input
            v-model="hostForm.hostPort"
            placeholder="请输入端口号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input
            v-model="hostForm.userName"
            placeholder="请输入用户名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="hostForm.password"
            placeholder="请输入密码"
            type="password"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('hostForm')"
            >连接</el-button
          >
          <el-button @click="stopConnect">断开连接</el-button>
        </el-form-item>
      </el-form>
    </div>
    <xterm
      ref="xterm"
      :hostIp="hostForm.hostIp"
      :hostPort="hostForm.hostPort"
      :userName="hostForm.userName"
      :password="hostForm.password"
    ></xterm>
  </div>
</template>

<script>
/**
 * @Version 1.0.0
 * @Author DemoHui
 * @Date 2022/11/09
 */

import Xterm from "@/views/webSsh/components/Xterm";
export default {
  name: "index",
  components: {
    Xterm,
  },
  data() {
    return {
      hostForm: {
        // hostIp: "39.106.10.80",
        // hostPort: "22",
        // userName: "root",
        // password: "",
        hostIp: "47.109.79.105",
        hostPort: "22",
        userName: "root",
        password: "",
      },
      rules: {
        hostIp: [{ required: true, message: "请输入主机IP", trigger: "blur" }],
        hostPort: [
          { required: true, message: "请输入主机端口", trigger: "blur" },
        ],
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$refs.xterm.startConnect();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    stopConnect() {
      this.$refs.xterm.stopConnect();
    },
  },
};
</script>

<style scoped>
.xterm-container {
  padding: 20px;
}
</style>
